<template>
	<view class="storeBox">
		<view class="top">
			<view class="searchBox">
				<u-input type="text" placeholder="请输入门店名称" v-model="storeName" confirm-type="search" @confirm="getStoreList"></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
			</view>
			<view class="controlBox" :class="{ show: showBatchMenu }">
				<view class="content" @click="showBatchMenu = !showBatchMenu">
					批量操作
					<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
				</view>
				<view class="controlMenu">
					<view class="" @click="batchControl('down')">打烊</view>
					<view class="" @click="batchControl('up')">营业</view>
				</view>
			</view>
		</view>
		<view class="topMneu">
			<view class="" :class="{ check: menuCheckIndex == index }" v-for="(item, index) in menuList" :key="index" @click="checkMenu(index)">{{ item }}</view>
		</view>
		<view class="store">
			<view class="allCheck" @click="changeAllCheck">
				<checkbox :checked="allChecked" />
				<text>全选</text>
			</view>
			<view class="storeList" v-for="(item, index) in storeList" :key="index">
				<view class="name" @click="changeRadioCheck(index)">
					<checkbox :checked="item.checked" />
					<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/shopLi2.png" mode=""></image>
					{{ item.storeName }}
				</view>
				<view class="" @click="changeRadioCheck(index)">
					<view class="">
						门店合作单价:
						<text v-for="(item, index) in item.storeUnitPrice" :key="index">{{ item }}元</text>
					</view>
					<view class="">
						营业状态:
						<text>{{ item.businessState }}</text>
					</view>
					<view class="">
						排序:
						<text>{{ item.sort }}</text>
					</view>
				</view>
				<view class="">
					<view class="">
						所属站点:
						<text>{{ item.siteName ? item.siteName : '' }}</text>
					</view>
					<!-- <view class="">供应地址: <text>{{item.}}</text></view> -->
				</view>
				<view class="">
					<view class="">
						口味:
						<text>{{ item.flavorScore }}</text>
					</view>
					<view class="">
						包装:
						<text>{{ item.packagingScore }}</text>
					</view>
					<view class="">
						份量:
						<text>{{ item.componentScore }}</text>
					</view>
				</view>
				<view class="">
					<!-- <view class="">营业时间: <text>{{item.businessHoursBegin}}-{{item.businessHoursEnd}}</text></view> -->
					<view class="">
						营业时间:
						<text>{{ item.businessTime }}</text>
					</view>
				</view>
				<view class="control">
					<view class="" @click="showEdit(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/edit2.png" mode=""></image>
						编辑
					</view>
					<view class="" @click="goToStore(item.id)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/manages.png" mode=""></image>
						管理
					</view>
					<view class="" @click="deleteStore(item.id)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/del.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>
		<image class="addStore" @click="showBox" src="https://www.yongshantuan.cn/images/yongshan/platformSide/new.png" mode=""></image>
		<CommenFooter :checkIndex="2"></CommenFooter>
		<AddStore :show="showAddStore" :type="showType" :editStoreInfo="editStoreInfo" @hideBox="hideBox" @showToast="showToast"></AddStore>
		<AddNotice :show="showAddNotice" @hideBox="hideNoticeBox"></AddNotice>
		<u-toast ref="uToast"></u-toast>
		<u-modal
			v-model="visiable"
			:content="`是否将选中的${this.ids.length}个商家更改为${batchType == 'up' ? '营业' : '打烊'}状态`"
			:show-cancel-button="true"
			@confirm="batConfirm"
			:zIndex="999999999"
		></u-modal>
	</view>
</template>

<script>
import { getStoreList, batchChangeStoreState, getStoreToken, deleteStore } from '@/utils/req/api.js';
import CommenFooter from '@/components/footer/footer.vue';
import AddStore from '@/components/addStore/addStore.vue';
import AddNotice from '@/components/addNotice/addNotice.vue';
export default {
	components: {
		CommenFooter,
		AddStore,
		AddNotice
	},
	data() {
		return {
			showAddStore: false,
			showType: '',
			editStoreInfo: '', //编辑商铺时对应的商铺信息
			showAddNotice: false,
			menuList: ['不限', '营业中', '打烊中'],
			menuCheckIndex: 0,
			storeList: [],

			pageNo: 1,
			pageSize: 10,
			moreStoreFlag: false,

			businessState: null,
			storeName: '',

			showBatchMenu: false,
			visiable: false,

			allChecked: false,
			batchType: '', //批量操作的类型
			ids: [], //选中数据的id集合
			selectRows: [] //选中数据的集合
		};
	},
	mounted() {
		//监控页面滚动
		window.addEventListener('scroll', this.getMoreStore, true);
	},
	onShow() {
		this.getStoreList();
	},
	methods: {
		//删除店铺
		async deleteStore(id) {
			let res = await deleteStore({
				id
			});
			console.log('res', res);
			this.getStoreList();
		},
		//获取选中数据的集合
		getRows() {
			console.log('888');
			this.ids = [];
			this.selectRows = [];
			this.storeList.forEach(item => {
				console.log('item.checked', item.checked);
				if (item.checked) {
					this.ids.push(item.id);
					this.selectRows.push(item);
				}
			});
		},
		//全选点击
		changeAllCheck() {
			this.allChecked = !this.allChecked;
			this.storeList.forEach(item => {
				item.checked = this.allChecked;
			});
			this.getRows();
		},
		//单选点击
		changeRadioCheck(index) {
			let obj = JSON.parse(JSON.stringify(this.storeList[index]));
			obj.checked = !obj.checked;
			this.$nextTick(() => {
				this.$set(this.storeList, index, obj);
				this.getRows();
			});
			console.log('this.storeList', this.storeList[index].checked);
		},
		batchControl(type) {
			if (this.ids.length == 0) {
				this.$showToast.call(this, '请至少选择一个商家', 'warning');
				return;
			}
			this.batchType = type;
			this.visiable = true;
			this.showBatchMenu = false;
		},
		async batConfirm() {
			let res = await batchChangeStoreState({
				selections: this.ids.join(','),
				businessState: this.batchType == 'down' ? 2 : 0
			});
			console.log('res', res);
			if (res.data.success) {
				if (res.data.message) {
					this.$showToast.call(this, res.data.message, 'success');
				} else {
					this.$showToast.call(this, res.data.message, 'success');
				}
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
		},
		//获取店铺列表
		async getStoreList(type) {
			let res = await getStoreList({
				pageSize: this.pageNo * this.pageSize,
				pageNo: 1,
				businessState: this.businessState,
				storeName: this.storeName
			});
			let nowHour = new Date().getHours();
			let nowMinute = new Date().getMinutes();
			res.data.result.records.forEach(item => {
				item.storeUnitPrice = item.storeUnitPrice ? JSON.parse(item.storeUnitPrice) : '';
				item.checked = false;
				let businessTimeArr = [];
				JSON.parse(item.businessHours).forEach((item, index) => {
					if (item.startTime && item.endTime) {
						businessTimeArr.push(item.startTime + '-' + item.endTime);
					}
				});
				item.businessTime = businessTimeArr.join(',');
			});
			this.storeList = [];
			this.storeList = res.data.result.records;
		},
		//
		checkMenu(index) {
			this.menuCheckIndex = index;
			switch (index) {
				case 0:
					this.businessState = null;
					break;
				case 1:
					this.businessState = 'YES';
					break;
				case 2:
					this.businessState = 'NO';
					break;
			}
			this.getStoreList();
		},
		//展示添加商品弹窗--新增
		showBox() {
			this.showType = 'add';
			this.showAddStore = true;
		},
		//隐藏添加商品弹窗
		hideBox() {
			this.showAddStore = false;
			this.getStoreList();
			this.type = '';
			this.editStoreInfo = {};
		},

		showEdit(value) {
			this.showAddStore = true;
			this.editStoreInfo = value;
			this.showType = 'edit';
		},

		hideNoticeBox() {
			this.showAddNotice = false;
		},
		showToast(message, type) {
			this.$showToast.call(this, message, type);
		},
		async goToStore(id) {
			let res = await getStoreToken({
				id
			});
			console.log('res', res);
			if (res.data.success) {
				let baseUrl = 'https://merchant.yongshantuan.cn';
				// let baseUrl = 'http://192.168.2.50:8081';
				window.location.href = baseUrl + '/#/pages/login/login?code=' + res.data.result.token;
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
		}
	},
	onReachBottom() {
		if (!this.moreStoreFlag) {
			if (this.storeList.length != 0 && this.storeList.length % this.pageSize == 0) {
				this.pageNo = this.pageNo + 1;
				this.moreStoreFlag = true;
				this.getStoreList('push');
				setTimeout(() => {
					this.moreStoreFlag = false;
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.storeBox {
	background-color: #f5f5f5;
	padding-bottom: 200rpx;
	min-height: 100vh;
}

.top {
	padding: 20rpx;
	@include flex(space-between, center);
	background-color: #fff;

	.searchBox {
		@include flex();

		// flex: 1;
		width: 75%;
		margin-left: 20rpx;
		@include flex();

		image {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			left: 10rpx;
			top: 5rpx;
		}

		border-radius: 50rpx;
		border: 1px solid #f5f5f5;
		position: relative;
		overflow: hidden;

		/deep/.u-input__input {
			font-size: 28rpx;
			line-height: 60rpx;
			height: 60rpx;
			min-height: auto !important;
			text-indent: 60rpx;
			background-color: #f5f5f5;
		}
	}

	.controlBox {
		width: 25%;
		position: relative;
		@include flex(flex-end, center);
		font-size: 30rpx;
		line-height: 2;

		.content {
			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
				transform: rotate(-90deg);
			}
		}

		.controlMenu {
			width: 100%;
			position: absolute;
			left: 0;
			top: 100%;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			color: rgba(0, 0, 0, 0.55);
			background-color: #fff;
			padding: 10rpx 10rpx;
			text-align: center;
			line-height: 2;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;

			> view {
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);

				&:last-child {
					border: 0;
				}
			}

			display: none;
		}
	}

	.show {
		.content {
			image {
				transition: all 0.3s;
				transform: rotate(0);
			}
		}

		.controlMenu {
			display: block;
		}
	}
}

.topMneu {
	@include flex();
	background-color: #fff;
	border-top: 1px solid #eee;

	> view {
		width: calc(100% / 3);
		@include flex(center, center);
		color: rgba(0, 0, 0, 0.55);
		line-height: 40rpx;
		padding: 28rpx 0;
		font-size: 30rpx;
	}

	> .check {
		color: #fa690a;
	}
}

.store {
	.allCheck {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		line-height: 2;

		/deep/.uni-checkbox-input {
			margin-right: 20rpx;
		}
	}

	/deep/.uni-checkbox-input {
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
		border-color: #fa690a !important;
	}

	/deep/.uni-checkbox-input-checked {
		border-color: #fa690a !important;

		&:before {
			content: '';
			width: 30rpx;
			height: 30rpx;
			background-color: #fa690a;
			border-radius: 50%;
			display: block;
		}
	}
}

.storeList {
	background-color: #fff;
	padding: 30rpx 20rpx 0 20rpx;
	margin-bottom: 20rpx;

	.name {
		@include flex();
		color: #000;
		font-size: 30rpx;
		line-height: 2;
		font-weight: 600;
		margin-bottom: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	> view {
		@include flex();
		font-size: 28rpx;
		// color: rgba(0, 0, 0, 0.35);
		color: #000;
		line-height: 2;
		// margin: 10rpx 0;
		flex-wrap: wrap;

		> view {
			margin-right: 20rpx;

			text {
				color: #000;
				margin-left: 16rpx;
			}
		}
	}

	.control {
		@include flex(space-around, center);
		border-top: 1px solid #eee;
		margin-top: 20rpx;
		line-height: 2;
		padding: 32rpx 0;

		> view {
			@include flex();

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
		}
	}
}

.addStore {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	position: fixed;
	right: 0;
	bottom: 10vh;
}

uni-checkbox {
	font-size: 0;
}
</style>
